<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>仿支付宝密码输入框</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>

<style>
    .alieditContainer{
        position:relative;
    }
    .alieditContainer .i-text{
        position: absolute;color: #fff;opacity:0.2;
        width:306px; height:48px; font-size:12px; left:0;
        -webkit-user-select:initial;
        /*取消禁用选择页面元素*/z-index:9;	padding:0;	border:0;
    }
    .alieditContainer .sixDigitPassword {width:306px; height:22px; cursor:text; background:#fff; outline:none; position:relative; padding:13px 0; border:1px solid #ddd; border-radius:5px;}
    .alieditContainer .sixDigitPassword i {width:50px; height:16px; float:left; display:block; padding:4px 0; border-left:1px solid #cccccc;}
    .alieditContainer .sixDigitPassword i:first-child{border-left:0;}
    .alieditContainer .sixDigitPassword i.active{background-image: url("https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif");background-repeat: no-repeat;background-position: center center; }
    .alieditContainer .sixDigitPassword b{display:block; margin:5px auto 4px auto; width:7px; height:7px; overflow:hidden; display:none;/*visibility:hidden;*/ background:#000; border-radius:100%;}
    .alieditContainer .sixDigitPassword .guangbiao{width:50px; height:48px; position:absolute; display:block; left:0px; top:-1px; border:1px solid rgba(82, 168, 236, .8); border:1px solid #00ffff\9; border-radius:5px; visibility:visible; -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
</style>

<div class="alieditContainer" id="payPassword_container">
    <input minlength="6" maxlength="6" tabindex="1"
           id="payPassword_rsainput"
           name="payPassword_rsainput"
           class="ui-input i-text"
           oncontextmenu="return false"
           onpaste="return false"
           oncopy="return false"
           oncut="return false"
           autocomplete="off" value="" type="password">
    <div class="sixDigitPassword" tabindex="0">
        <i class="active"><b></b></i>
        <i><b></b></i>
        <i><b></b></i>
        <i><b></b></i>
        <i><b></b></i>
        <i><b></b></i>
        <span class="guangbiao" style="left:0px;"></span>
    </div>
</div>

<p></p>

<script>
    $(window).ready(function() {

        $(".i-text").keyup(function() {
            var inp_v = $(this).val();
            var inp_l = inp_v.length;
            //$("p").html( "input的值为：" + inp_v +"; " + "值的长度为:" + inp_l);//测试用

            for( var x = 0; x<=6; x++) {
                $("p").html( inp_l );//测试

                $(".sixDigitPassword").find("i").eq( inp_l ).addClass("active").siblings("i").removeClass("active");
                $(".sixDigitPassword").find("i").eq( inp_l ).prevAll("i").find("b").css({"display":"block"});
                $(".sixDigitPassword").find("i").eq( inp_l - 1 ).nextAll("i").find("b").css({"display":"none"});

                $(".guangbiao").css({"left":inp_l * 51});//光标位置

                if( inp_l == 0) {
                    $(".sixDigitPassword").find("i").eq( 0 ).addClass("active").siblings("i").removeClass("active");
                    $(".sixDigitPassword").find("b").css({"display":"none"});
                    $(".guangbiao").css({"left":0});
                } else if( inp_l == 6) {
                    $(".sixDigitPassword").find("b").css({"display":"block"});
                    $(".sixDigitPassword").find("i").eq(5).addClass("active").siblings("i").removeClass("active");
                    $(".guangbiao").css({"left":5 * 51});
                }
            }
        });

    });
</script>

</body>
</html>